<template>
  <div class="table-search-content-container">
    <a-form layout="inline" :model="{}">
      <a-form-item v-for="item of conditionItems" :key="item.key" :label="item.label">
        <template v-if="item.render">
          <FormRender :render="item.render" :formItem="item" />
        </template>
        <template v-else>
          <template v-if="item.type === 'input'">
            <a-input v-model="item.value.value" :placeholder="item.placeholder" />
          </template>
          <template v-if="item.type === 'select'">
            <a-select v-model="item.value.value" style="width: 150px" :placeholder="item.placeholder">
              <a-option v-for="optionItem of item.optionItems!.value" :key="optionItem[item.optionProps!.value]"
                :value="optionItem[item.optionProps!.value]">
                {{ optionItem[item.optionProps!.label] }}
              </a-option>
            </a-select>
          </template>
          <template v-if="item.type === 'cascader'">
            <a-cascader :options="item.optionItems!.value" v-model="item.value.value" :placeholder="item.placeholder"
              check-strictly :field-names="item.optionProps" allow-clear allow-search />
          </template>
          <template v-if="item.type === 'date'">
            <a-date-picker v-model="item.value.value" />
          </template>
          <template v-if="item.type === 'time'">
            <a-time-picker v-model="item.value.value" value-format="HH:mm:ss" />
          </template>
          <template v-if="item.type === 'check-group'">
            <a-checkbox-group v-model="item.value.value">
              <a-checkbox v-for="it of item.optionItems" :value="it.value" :key="it.value">
                {{ item.label }}
              </a-checkbox>
            </a-checkbox-group>
          </template>
        </template>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { FormItem } from '@/types/components'

// 定义属性
const props = defineProps<{
  conditionItems: Array<FormItem>;
}>();
</script>

<style lang="scss" scoped>
:deep(.arco-form-item) {
  margin: 0 !important;
  margin-right: 10px !important;
}
</style>